<template>
  <up-tabs :list="list" :current="current" :lineColor="`url(${lineBg}) 100% 100%`" lineWidth="28rpx" lineHeight="28rpx"
    :activeStyle="{
      color: '#FF416C',
      fontSize:'32rpx'
  }" :inactiveStyle="{
      color: '#333333',
      fontSize:'28rpx'
  }" @change="onChange"></up-tabs>
</template>

<script setup>
  import {
    defineProps,
    defineEmits
  } from 'vue'
  const lineBg = "../../static/icon/user/line-list.png";
  const {
    list,
    current
  } = defineProps({
    list: {
      type: Array,
    },
    current: {
      type: Number,
      default: 0
    }
  })
  const emit = defineEmits("change")

  function onChange(e) {
    emit('change', e)
  }
</script>

<style lang="less">
  /deep/ .u-tabs__wrapper__nav__item {
    position: relative;
  }

  /deep/ .u-tabs__wrapper__nav__line {
    position: absolute;
    top: 16rpx;
    right: 91%;
  }
</style>